<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 100%;
            border: 1px solid #ccc;
            border-collapse: collapse;
            border-spacing: 0px;
        }

        table td {
            border: 1px solid #ccc;
            height: 30px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h1>的使用创建dom节点动态生成表格</h1>
        <label for="">行：</label>
        <input type="text" id="row">
        <label for="">列：</label>
        <input type="text" id="col">
        <input type="button" id="btn" value="生成">
        <input type="button" id="btn1" value="复制">
        <input type="button" id="btn2" value="删除">
        <div id="output">
            <!-- <table>
                <tbody>
                    <tr>
                        <td>浮动法</td>
                    </tr>
                </tbody>
            </table> -->
        </div>
    </div>
    <script>
        // 先获取已知的元素
        var btn = document.querySelector('#btn');
        var btn1 = document.querySelector('#btn1');
        var btn2 = document.querySelector('#btn2');
        var col = document.querySelector('#col');
        var row = document.querySelector('#row');
        var tbody = document.querySelector('tbody')
        var tr = document.querySelector('tr')
        var output = document.querySelector('#output');



        // 给按钮绑定点击事件
        btn.onclick = function () {
            //   获取 行数 和 列数
            var _row = row.value;
            var _col = col.value;
            // console.log(_row, _col);

            var table = document.createElement('table');
            var tbody = document.createElement('tbody');

            // 把tbody放入 table中
            table.appendChild(tbody);

            // 根据行数 和 列数 生成表格 
            for (var i = 0; i < _row; i++) {
                // 没外层循环一次 就生成一个tr
                var tr = document.createElement('tr');

                // 隔行变色 判断的i的值是偶数还是奇数
                if (i % 2 !== 0) {
                    tr.style.background = '#ccc'
                }

                for (var j = 0; j < _col; j++) {
                    // 没循环一次内层循环生成一个td元素
                    var td = document.createElement('td');
                    td.innerHTML = '单元格' + i + j
                    // 把td放入 tr
                    tr.appendChild(td);

                }
                var btn1 = document.createElement('button')
                var btn2 = document.createElement('button')

                tr.appendChild(btn1);
                btn1.innerHTML = '复制'
                tr.appendChild(btn2);
                btn2.innerHTML = '删除'

                // 给按钮绑定点击事件
                btn1.onclick = function () {
                    var res = this.parentElement.cloneNode(true)
                    tbody.appendChild(res);
                    res.lastElementChild
                }

                //给按钮绑定点击事件
                btn2.onclick = function () {
                    // tbody.removeChild(tr)
                    this.parentElement.remove();
                }

                // 把tr 放入tbody里面
                tbody.appendChild(tr)
            }

            // 当表格都生成完成之后，把table放入 out普通z中
            output.appendChild(table)
        }
    </script>
</body>

</html>